import React, { Component, Suspense } from 'react';
import Highcharts from 'highcharts';
import { Row, Col, Popover } from 'antd';
import router from 'umi/router';
import OrderAnalysisTable from './OrderAnalysisTable';
import triangle from '@/assets/triangle_left.svg';
import styles from './orderAnalysis.less';
import { getTimeDistance } from '@/utils/utils';
import PageLoading from '@/components/PageLoading';

const IntroduceRow = React.lazy(() => import('./IntroduceRow'));
const SalesCard = React.lazy(() => import('./SalesCard'));
const colors = ['#1890ff', '#fa541c', '#bfbfbf', '#fadb14', '#13c2c2', '#a0d911'];
const clientHeight = (document.body.clientHeight - 80) / 2;


export default class OrderAnalysis extends Component {
  constructor(props) {
    super(props);
    this.state = {
      rangePickerValue: getTimeDistance('year'),
      salesData: [
        {
          x: 'Jan',
          y: 620,
        },
        {
          x: 'Feb',
          y: 389,
        },
        {
          x: 'Mar',
          y: 898,
        },
        {
          x: 'Apr',
          y: 634,
        },
        {
          x: 'May',
          y: 133,
        },
        {
          x: 'Jun',
          y: 895,
        },
        {
          x: 'Jul',
          y: 564,
        },
        {
          x: 'Aug',
          y: 893,
        },
        {
          x: 'Sept',
          y: 673,
        },
        {
          x: 'Oct',
          y: 677,
        },
        {
          x: 'Nov',
          y: 342,
        },
        {
          x: 'Dec',
          y: 674,
        },
      ]
    };
  }

  componentDidMount() {
    // setTimeout(() => {
    //     this.getHeight({ name: 'ant-form', key: 'formHeight' });
    //     this.setState({
    //       clientHeight: document.body.clientHeight,
    //     });
    //   }, 20);
    let _this = this;
    //柱状图
    var chart = Highcharts.chart('ColumnarChart', {
      chart: {
        type: 'column',
      },
      title: {
        text: 'Warehouse Order Dashboard',
      },
      colors: ['#a0d911', '#fa541c', '#1890ff', '#fadb14', '#bfbfbf', '#a0d911'],
      xAxis: {
        categories: ['21-Apr', '22-Apr', '23-Apr', '24-Apr', '25-Apr', '26-Apr'],
      },
      credits: {
        enabled: false, // 默认值，如果想去掉版权信息，设置为false即可
        text: 'www.hcharts.cn', // 显示的文字
        href: 'http://www.hcharts.cn', // 链接地址
        position: {
          // 位置设置
          align: 'left',
          x: 400,
          verticalAlign: 'bottom',
          y: -100,
        },
        style: {
          // 样式设置
          cursor: 'pointer',
          color: 'red',
          fontSize: '30px',
        },
      },
      yAxis: {
        min: 0,
        title: {
          text: '',
        },
        stackLabels: {
          // 堆叠数据标签
          enabled: true,
          style: {
            fontWeight: 'bold',
            color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray',
          },
        },
      },

      tooltip: {
        formatter: function () {
          return (
            '<b>' +
            this.x +
            '</b><br/>' +
            this.series.name +
            ': ' +
            this.y +
            '<br/>' +
            '总量: ' +
            this.point.stackTotal
          );
        },
      },
      plotOptions: {
        column: {
          stacking: 'normal',
          dataLabels: {
            enabled: true,
            color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
            style: {
              // 如果不需要数据标签阴影，可以将 textOutline 设置为 'none'
              textOutline: false,
            },
          },
        },
        series: {
          cursor: 'pointer',
          events: {
            click: function (event) {
              _this.showDetail(this.name, event.point.category);
            },
          },
        },
      },
      series: [
        {
          name: 'Order shipped',
          data: [14, 15, 12, null, null, null],
        },
        {
          name: 'Ready to ship',
          data: [null, null, 3, 8, null, null],
        },
        {
          name: 'Order packed',
          data: [null, null, 1, 4, null, null],
        },
        {
          name: 'Order picked',
          data: [null, null, null, 2, 5, null],
        },
        {
          name: 'Order received',
          data: [null, null, null, 2, 2, 6],
        },
      ],
    });

    //饼图
    Highcharts.chart('PieChart', {
      chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie',
      },
      colors: ['#1890ff', '#fa541c', '#bfbfbf', '#fadb14', '#13c2c2', '#a0d911'],
      title: {
        text: 'Customer Distribution by Shipment',
      },
      tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>',
      },
      credits: {
        enabled: false, // 禁用版权信息
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
            enabled: true,
            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
            style: {
              color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
            },
          },
        },
      },
      series: [
        {
          //   name: 'Brands',
          colorByPoint: true,
          data: [
            {
              name: '北京赛泰克（5）',
              y: 5,
              sliced: true,
              selected: true,
            },
            {
              name: '广州华粤（3）',
              y: 3,
            },
            {
              name: '上海百赛（3）',
              y: 3,
            },
            {
              name: '梅里亚（2）',
              y: 2,
            },
            {
              name: '北京伊诺凯（2）',
              y: 2,
            },
            {
              name: '济南汇世（1）',
              y: 1,
            },
          ],
        },
      ],
    });
    //横向柱状图：
    var chart = Highcharts.chart('Columnar', {
      chart: {
        type: 'bar',
      },
      title: {
        text: 'April KPI',
      },
      //   subtitle: {
      //     text: ' Wikipedia.org',
      //   },
      options3d: {
        enabled: true,
        alpha: 10,
        beta: 25,
        depth: 70,
        viewDistance: 100, // 视图距离，它对于计算角度影响在柱图和散列图非常重要。此值不能用于3D的饼图
        frame: {
          // Frame框架，3D图包含柱的面板，我们以X ,Y，Z的坐标系来理解，X轴与 Z轴所形成
          // 的面为bottom，Y轴与Z轴所形成的面为side，X轴与Y轴所形成的面为back，bottom、
          // side、back的属性一样，其中size为感官理解的厚度，color为面板颜色
          bottom: {
            size: 10,
          },
          side: {
            size: 1,
            color: 'transparent',
          },
          back: {
            size: 1,
            color: 'transparent',
          },
        },
      },
      xAxis: {
        categories: ['Ontime arrival', 'Ontime delivery', 'WH utlilization'],
        title: {
          text: null,
        },
        plotLines: [
          {
            color: 'red', //线的颜色，定义为红色
            dashStyle: 'solid', //标示线的样式，默认是solid（实线），这里定义为长虚线
            value: 9, //定义在哪个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线
            width: 2, //标示线的宽度，2px
          },
        ],
      },
      colors: ['#1890ff', '#15E072', '#2f54eb'],
      yAxis: {
        min: 88,
        max: 100,
        title: {
          text: '',
          align: 'high',
        },
        labels: {
          overflow: 'justify',
        },
      },
      tooltip: {
        valueSuffix: '%',
      },
      credits: {
        enabled: false, // 禁用版权信息
      },
      plotOptions: {
        bar: {
          dataLabels: {
            enabled: true,
            allowOverlap: true, // 允许数据标签重叠
            style: {
              // 如果不需要数据标签阴影，可以将 textOutline 设置为 'none'
              textOutline: false,
            },
          },
        },
        series: {
          borderWidth: 0,
          dataLabels: {
            enabled: true,
            format: '{point.y:.1f}%',
            style: {
              // 如果不需要数据标签阴影，可以将 textOutline 设置为 'none'
              textOutline: false,
            },
          },
        },
      },
      legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -40,
        y: 0,
        floating: true,
        borderWidth: 1,
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
        shadow: true,
      },
      series: [
        {
          name: 'Completion',
          data: [99.73, 99.33, 92.31],
        },
        {
          type: 'scatter',
          name: 'KPI',
          data: [
            {
              y: 99.5,
              marker: {
                symbol: 'url(' + triangle + ')',
              },
            },
            {
              y: 99,
              marker: {
                symbol: 'url(' + triangle + ')',
              },
            },
            {
              y: 90,
              marker: {
                symbol: 'url(' + triangle + ')',
              },
            },
          ],
        },
      ],
    });
  }

  showDetail = (name, type) => {
    this.setState({
      statusShip: name,
    });
    router.push({
      pathname: `/portal/corelle/myOrderList`,
      query: {
        statusShip: name,
      },
    });
  };

  isActive = type => {
    const { rangePickerValue } = this.state;
    const value = getTimeDistance(type);
    if (!rangePickerValue[0] || !rangePickerValue[1]) {
      return '';
    }
    if (
      rangePickerValue[0].isSame(value[0], 'day') &&
      rangePickerValue[1].isSame(value[1], 'day')
    ) {
      return styles.currentDate;
    }
    return '';
  };

  handleRangePickerChange = rangePickerValue => {
    const { dispatch } = this.props;
    this.setState({
      rangePickerValue,
    });

    // dispatch({
    //   type: 'chart/fetchSalesData',
    // });
  };

  selectDate = type => {
    const { dispatch } = this.props;
    this.setState({
      rangePickerValue: getTimeDistance(type),
    });

    // dispatch({
    //   type: 'chart/fetchSalesData',
    // });
  };

  render() {
    const { rangePickerValue } = this.state;
    return (
      <div>
        <Suspense fallback={<PageLoading />}>
          <IntroduceRow  visitData={this.state.salesData} />
        </Suspense>
        {/* <Suspense fallback={null}  >
          <div style={{ marginBottom: '12px',marginTop:'-12px' }} >
            <SalesCard
              rangePickerValue={rangePickerValue}
              salesData={this.state.salesData}
              isActive={this.isActive}
              handleRangePickerChange={this.handleRangePickerChange}
              // loading={loading}
              selectDate={this.selectDate}
            />
          </div>
        </Suspense> */}
        <Row gutter={12}>
          <Col span={12}>
            <div
              id="ColumnarChart"
              style={{ minWidth: '400px', height: clientHeight + 'px' }}
            ></div>
          </Col>
          <Col span={12}>
            <div
              id="myTable"
              style={{ minWidth: '400px', height: clientHeight + 'px', background: '#fff' }}
            >
              <OrderAnalysisTable />
            </div>
          </Col>
        </Row>
        <Row style={{ marginTop: 10 }} gutter={12}>
          <Col span={12}>
            <div id="PieChart" style={{ minWidth: '400px', height: clientHeight + 'px' }}></div>
          </Col>
          <Col span={12}>
            <div id="Columnar" style={{ minWidth: '400px', height: clientHeight + 'px' }}></div>
          </Col>
        </Row>
      </div>
    );
  }
}
